<template>
  <div>

    <!--        新增课程申请-->
    <h3 style="color: slateblue">待审核选课申请</h3>
    <el-table title="待审核选课申请"
              ref="applyTable"
              :data="applyData"
              border
              stripe
              style="width: fit-content; margin-left: 10px">
      <el-table-column
          prop="id"
          label="申请序号"
          width="60">
      </el-table-column>
      <el-table-column
          prop="stuName"
          label="学生姓名"
          width="80">
      </el-table-column>
      <el-table-column
          prop="stuId"
          label="学号"
          width="80">
      </el-table-column>
      <el-table-column
          prop="courseId"
          label="课程代码"
          width="140">
      </el-table-column>
      <el-table-column
          prop="courseName"
          label="课程名称"
          width="140">
      </el-table-column>
      <el-table-column
          prop="teacherName"
          label="授课教师"
          width="100">
      </el-table-column>
      <el-table-column
          prop="college"
          label="学生院系"
          width="100">
      </el-table-column>
      <el-table-column
          prop="major"
          label="学生专业"
          width="80">
      </el-table-column>
<!--      <el-table-column-->
<!--          prop="currentNum"-->
<!--          label="已选人数"-->
<!--          width=70>-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--          prop="volume"-->
<!--          label="选课容量"-->
<!--          width=70>-->
<!--      </el-table-column>-->
      <el-table-column
          prop="reason"
          label="申请理由"
          width=140>
      </el-table-column>
<!--      <el-table-column-->
<!--          prop="rejectReason"-->
<!--          label="驳回理由"-->
<!--          width=140>-->
<!--      </el-table-column>-->
      <el-table-column
          fixed="right"
          label="操作"
          width="120">
        <template slot-scope="scope">
          <el-popconfirm title="确定通过申请吗？" @confirm="passApply(scope.row.id)">
            <el-button type="text" slot="reference">通过</el-button>
          </el-popconfirm>
          <el-divider direction="vertical"></el-divider>
          <el-button @click="checkApply(scope.row)" type="text" style="color:#787878">不通过</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="不通过选课申请" :visible.sync="checkVisible" width="600px" @closed="resetForm('checkForm')">
      <el-form :model="checkForm" :rules="checkFormRules" ref="checkForm">
        <el-form-item label="申请序号" prop="id"  label-width="100px">
          <el-input v-model="checkForm.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="驳回理由" prop="intro" label-width="100px">
          <el-input v-model="checkForm.rejectReason" type="textarea"  autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <!--按钮-->
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('checkForm')">取消</el-button>
        <el-popconfirm title="确定不通过申请吗？" style="margin-left: 20px">
          <el-button @click="rejectApply('checkForm')" type="primary" slot="reference">提交</el-button>
        </el-popconfirm>
      </div>
    </el-dialog>


  </div>
</template>

<script>
export default {
  name: "StuCoursesCheck",
  data(){

    return {

      applyData:[
        // {
        //   id: '1',
        //   stuName: '麻吉',
        //   stuId: '100000',
        //   courseId: 'SOFT120006.01',
        //   courseName: '软件工程',
        //   school: '软件学院',
        //   major: '软件工程',
        //   timeId: '周四第一节',
        //   location: 'H3101',
        //   current: 88,
        //   volume: 100,
        //   reason:'教务员爸爸求通过！！！爸爸！！！'
        // }
      ],

      checkForm:{},
      checkFormRules:{
        rejectReason:[
          {required: true, message: '请说明驳回理由', trigger: 'blur'},
        ]
      },

      checkVisible: false,
    }
  },
  created() {
    this.getApplyList();
  },
  methods:{
    //获取审批列表
    getApplyList(){
      this.$axios.get("/sys/course/admin/applyList").then(res => {
        this.applyData = res.data.data.sysCourseApps;
        // console.log(res.data.data);
      })
    },
    //通过审批
    passApply(id) {
      this.$axios.post('/sys/course/passStuApply', {id:id})
        .then(res => {
          console.log(res.data)
          this.$message({
            showClose: true,
            message: '恭喜你，操作成功',
            type: 'success',
            onClose: () => {
              // this.getApplyList()
            }
          });
        })
    },
    //不通过，跳出弹窗，填写理由
    checkApply(row) {
      this.checkVisible = true;
      this.checkForm.id = row.id;
    },
    rejectApply(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post('/sys/course/apply/rejectStuApply', {id:this.checkForm.id,rejectReason:this.checkForm.rejectReason})
              .then(res => {
                console.log(res.data)
                this.resetForm(formName)
                this.$message({
                  showClose: true,
                  message: '恭喜你，操作成功',
                  type: 'success',
                  onClose: () => {
                    this.getApplyList();
                  }
                });
              })
        } else {
          console.log('操作失败，请检查表单是否填写错误');
          return false;
        }})
    },
    //重设表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.checkForm = {}
      this.checkVisible = false
    },

  }
}
</script>

<style scoped>

</style>